{% extends 'web/template.html' %}

{% block title %}文章详情{% endblock %}
{% block head %}
<style>
    .detail-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
        background: #fff;
    }

    @media screen and (max-width: 767px) {
        .detail-container {
            padding: 15px;
        }
    }

    .detail-container1,
    .detail-container2 {
        display: none;
    }
</style>
{% endblock %}

{% block content %}

<div class="detail-container">

    <div class="detail-container1">
        {% include 'web/components/文章详情页/文章详情页.html' %}
    </div>
    <div class="detail-container2">
        
        <div class="back-button" onclick="back()">返回上一页</div>
        {% include 'web/line2/简洁版数据列表.html' %}
    </div>
</div>
{% endblock %}
{% block script %}
{% include 'web/line2/解密模块.html' %}
<script>
    // 查看详情
    function viewDetail(url) {
        // 将文章 URL 编码后作为参数传递给详情页
        window.location.href = `/web/line2/detail/?article_url=${encodeURIComponent(url)}`;
    }
    // 加载合集
    // 修改渲染内容函数
    function renderContent(data) {
        const contentList = document.getElementById('contentList');
        contentList.innerHTML = data.detail_imgs.map((item, index) => `
            <div class="content-card" onclick="viewDetail('${item.url}')">
                <img class="content-image" 
                     id="content-image-${index}"
                     alt="${item.title}"
                     style="opacity: 0; transition: opacity 0.3s;">
                <div class="content-info">
                    <div class="content-title">${item.title}</div>
                </div>
            </div>
        `).join('');

        // 对每张图片进行解密处理
        data.detail_imgs.forEach((item, index) => {
            const imgElement = document.getElementById(`content-image-${index}`);

            // 直接调用 loadBackgroundImage 解密图片
            loadBackgroundImage(item.sub_category_item_cover[0], imgElement);
            // 监听图片加载完成事件
            imgElement.onload = function () {
                imgElement.style.opacity = '1';
            };
        });
    }

</script>
<script>


    // 修改更新查看器中的图片函数
    function updateViewerImage() {
        const viewerImg = document.getElementById('viewerImage');
        const currentIndexEl = document.getElementById('currentImageIndex');

        // 使用 loadBackgroundImage 解密新的图片
        loadBackgroundImage(allImages[currentImageIndex], viewerImg);
        currentIndexEl.textContent = currentImageIndex + 1;
    }
    // 修改显示图片查看器函数
    function showImageViewer(imgSrc, index) {
        currentImageIndex = index;
        const viewer = document.getElementById('imageViewer');
        const viewerImg = document.getElementById('viewerImage');
        const currentIndexEl = document.getElementById('currentImageIndex');
        const totalImagesEl = document.getElementById('totalImages');

        // 使用 loadBackgroundImage 解密查看器中的图片
        loadBackgroundImage(imgSrc, viewerImg);
        currentIndexEl.textContent = index + 1;
        totalImagesEl.textContent = allImages.length;

        viewer.style.display = 'flex';
        document.body.style.overflow = 'hidden';
    }
    // 图片模块
    // 修改渲染图片函数
    function renderImages(images, title) {
        allImages = images; // 保存所有图片URL
        const imageContent = document.getElementById('imageContent');
        imageContent.innerHTML = images.map((img, index) => `
        <div class="image-container loading">
            <img class="detail-image" 
                 id="detail-image-${index}"
                 alt="${title} - 图片${index + 1}"
                 onclick="showImageViewer('${img}', ${index})"
                 style="opacity: 0; transition: opacity 0.3s;">
        </div>
    `).join('');

        // 对每张图片进行解密处理
        images.forEach((img, index) => {
            const imgElement = document.getElementById(`detail-image-${index}`);
            // 使用 loadBackgroundImage 解密图片
            loadBackgroundImage(img, imgElement);
            // 监听图片加载完成事件
            imgElement.onload = function () {
                imgElement.style.opacity = '1';
                imgElement.parentElement.classList.remove('loading');
            };
        });
    }

</script>
<script>
    let title, detail_imgs, play_url;
    // 加载文章详情
    async function loadArticleDetail() {
        const articleUrl = getArticleUrl();
        if (!articleUrl) {
            showError('文章链接无效');
            return;
        }

        try {
            showLoading();
            const response = await axios.get('api/scraper/hei_liao/line2/get_article_detail/', {
                params: { article_url: articleUrl }
            });

            if (response.data.code === 0) {
                if (response.data.data.is_collection) {
                    document.querySelector('.detail-container2').style.display = 'block';
                    renderContent(response.data.data);
                    return;
                }
                document.querySelector('.detail-container1').style.display = 'block';

                // const { title, detail_imgs, play_url } = response.data.data;
                title = response.data.data.title;
                detail_imgs = response.data.data.detail_imgs;
                play_url = response.data.data.play_url;
                // 设置标题
                document.getElementById('articleTitle').textContent = title;
                document.title = title;

                // 只有在有视频链接时才初始化播放器
                if (play_url && play_url.trim()) {
                    const videoContainer = document.getElementById('videoContainer');
                    videoContainer.style.display = 'block';

                    
                }

                // 渲染图片
                renderImages(detail_imgs, title);

            } else {
                layer.msg('文章不存在,3秒后自动返回上一页...', {
                    icon: 2,
                    time: 3000,
                    end: function() {
                        window.history.back();
                    }
                });
                // showError('获取文章详情失败：' + response.data.message);
            }
        } catch (error) {
            showError('获取文章详情失败：' + error.message);
        } finally {
            hideLoading();
        }
    }

</script>
{% endblock %}